<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script src="./vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    value:'lisi',
                    gender:'',
                    users:[{
                        id:1,
                        name:'lisi',
                        age:12,
                        gender:'men'
                    },{
                        id:2,
                        name:'wangwu',
                        age:22,
                        gender:'women'
                    },{
                        id:3,
                        name:'zhaoliu',
                        age:32,
                        gender:'men'
                    }],
                    checks:[],
                    select:''
                },
                methods:{
                    submit(){
                        console.log(this.checks)
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <b>{{select}}</b>
        <select v-model='select' multiple>
            <option value="11">11</option>
            <option value="22">22</option>
            <option value="33">33</option>
        </select>

        <hr>
        <table>
            {{checks}}
            <tr v-for='item in users'>
                <td><input type='checkbox' :value="item.id" v-model='checks'></td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
            </tr>
        </table>
        <button v-on:click='submit'>批量删除</button>

        <hr>
        <b>{{gender}}</b>
        性别：
            男：<input type="radio" value="man" v-model='gender'>
            女：<input type="radio" value="woman" v-model='gender'>

        <hr>
        {{value}}
        <input type="text" v-model='value'>
    </div>
</body>
</html>